<template>
  <div id="div1">
       <div class="login">

            <div class="form">
                <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="userInfo"
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                >
                    <el-form-item label="账号:" prop="username" >
                        <el-input type="text" placeholder="请输入用户名"   v-model="userInfo.username"/><br>
                    </el-form-item>
                    <el-form-item label="密码:" prop="password">
                        <el-input type="password" placeholder="请输入密码"   v-model="userInfo.password"/><br>
                    </el-form-item>
                    <el-button id="btn1" type="primary" round @click="onSubmit(ruleFormRef)">登录</el-button>
                </el-form>    
            </div>
        </div>

  </div>
</template>

<script lang="ts"  setup>

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

import { apiLogin } from '../api/apis'

const router=useRouter()



const userInfo=reactive({
    username:'张三',
    password:'123456'
})

interface RuleForm {
    username: string
    password: string
}    
const ruleFormRef = ref<FormInstance>()
const formSize = ref<ComponentSize>('default')
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    ],  
})
const onSubmit=async (formEl: FormInstance | undefined)=>{

    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
                login();
        } else {
            ElMessage.error("账号或密码不能为空")
         
        }
    })


    
}

const login=async ()=>{
            let  res= await apiLogin(userInfo) 
            console.log("========================")
            console.log(res.data.data);
            
            sessionStorage.setItem('token',res.data.data)
            console.log("登录成功");
            console.log(res);
            router.push('/index') 
}

</script>

<style scoped lang="scss">


div#div1{
    width: 1650px;
    height: 800px;
    margin-left: -200px;
    padding-block: 10px;
    background-image: url("../imgs/bj.jpg");
   

    .login{
        width: 400px;
        height: 280px;
        margin-left: 1100px;
        margin-top: 200px;
        background: linear-gradient(to bottom,transparent,#fff 400px ),
	            linear-gradient(to right,#beecd8,#F4E2D8);
	            min-height: 80px;
                border-radius: 10px;

        .form{
            width: 300px;
            height: 200px;
            margin-block: 20px;
            margin-left: 70px;
            padding-top: 70px;
            
           


            input{
                    width: 200px;
                    height: 30px;
                    margin-left: 0px;
                    margin-top: 20px;
                    border-radius: 10px;
                }

                #btn1{
                    margin-top: 20px;
                    margin-left: 100px;
          
                }      

        }        

                
               
        
    }
   
}

</style>